<template>
    <view>
        <view class="commentitem" v-for="(v, i) in data.replyList" :key="i">
            <view class="header">
                <view>
                    <uv-avatar size="24" v-if="v.isUserReply" default-url="/static/defaultavatar.png"
                        :src="data.userAvatar" shape="square"></uv-avatar>
                    <uv-avatar size="24" v-else
                        src="https://mxzj-translate.oss-cn-chengdu.aliyuncs.com/catv2/appfile/image/img/%E9%97%A8%E5%BA%97%403x.png"
                        shape="square"></uv-avatar>
                </view>
                <view class="header_right">
                    <view class="top">
                        <view v-if="v.isUserReply">{{ v.userName }} </view>
                        <view v-else>{{ $t('门店回复') }} </view>
                    </view>
                    <view class="top2">
                        <view>{{ dayjs(Number(v.replyTime)).format('YYYY-MM-DD HH:mm:ss') }}</view>
                    </view>
                </view>
            </view>
            <view class="datacontext">
                {{ v.content }}
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
defineProps<{ data: Eps.BaseUserCommentEntity }>()

</script>

<style scoped lang="scss">
.commentitem {
    background-color: $uni-text-color-inverse;
    display: flex;
    flex-direction: column;
    padding: 32rpx;
    gap: 24rpx;
    align-items: center;

    .header {
        display: flex;
        flex-wrap: wrap;
        gap: 12rpx;
        width: 100%;

        .header_right {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            .top {
                height: 43rpx;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                font-weight: 600;
            }

            .top2 {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                font-size: 24rpx;
                color: rgba(170, 170, 170, 1);
            }

        }
    }

    .datacontext {
        font-size: 28rpx;
        color: rgba(102, 102, 102, 1);
        line-height: 40rpx;
        width: 100%;
    }

}
</style>